<template>
  <div id="app">
    <el-container class="app-container">
      <!-- 头部 -->
      <el-header class="app-header">
        <div class="header-content">
          <div class="logo">
            <el-icon :size="32" color="#409EFF"><Document /></el-icon>
            <h1>BPG - 投标文档生成工具</h1>
          </div>
          <div class="header-info">
            <el-tag type="info">v1.0</el-tag>
          </div>
        </div>
      </el-header>

      <!-- 主体内容 -->
      <el-main class="app-main">
        <el-tabs v-model="activeTab" type="border-card" class="main-tabs">
          <!-- 提取技术内容标签页 -->
          <el-tab-pane label="1. 提取技术内容" name="extract">
            <div class="tab-content">
              <el-card shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-icon><Filter /></el-icon>
                    <span>提取技术内容</span>
                  </div>
                </template>
                <el-alert
                  title="说明"
                  type="info"
                  :closable="false"
                  style="margin-bottom: 20px"
                >
                  从招标说明中提取技术相关内容,过滤掉商务、法律条款等非技术信息。
                </el-alert>

                <el-upload
                  ref="extractUpload"
                  :auto-upload="false"
                  :limit="1"
                  accept=".md"
                  :on-change="handleExtractFileChange"
                  drag
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    拖拽文件到此处或<em>点击选择</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      仅支持 Markdown (.md) 文件,最大 16MB
                    </div>
                  </template>
                </el-upload>

                <div class="action-buttons">
                  <el-button
                    type="primary"
                    :loading="extractLoading"
                    :disabled="!extractFile"
                    @click="handleExtract"
                    size="large"
                  >
                    <el-icon><MagicStick /></el-icon>
                    开始提取
                  </el-button>
                </div>

                <div v-if="extractResult" class="result-area">
                  <div class="result-header">
                    <h3>提取结果</h3>
                    <el-button
                      type="success"
                      @click="downloadFile(extractResult, 'extract')"
                    >
                      <el-icon><Download /></el-icon>
                      下载文件
                    </el-button>
                  </div>
                  <el-input
                    v-model="extractResult.content"
                    type="textarea"
                    :rows="15"
                    readonly
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>

          <!-- 生成技术提纲标签页 -->
          <el-tab-pane label="2. 生成技术提纲" name="outline">
            <div class="tab-content">
              <el-card shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-icon><List /></el-icon>
                    <span>生成技术提纲</span>
                  </div>
                </template>
                <el-alert
                  title="说明"
                  type="info"
                  :closable="false"
                  style="margin-bottom: 20px"
                >
                  根据技术要求智能生成专业技术响应提纲,包含技术方案、人员配置、设备配置等章节。
                </el-alert>

                <el-upload
                  ref="outlineUpload"
                  :auto-upload="false"
                  :limit="1"
                  accept=".md"
                  :on-change="handleOutlineFileChange"
                  drag
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    拖拽技术要求文件到此处或<em>点击选择</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      上传第一步提取的技术要求文件,或手动编辑的技术要求
                    </div>
                  </template>
                </el-upload>

                <div class="action-buttons">
                  <el-button
                    type="primary"
                    :loading="outlineLoading"
                    :disabled="!outlineFile"
                    @click="handleOutline"
                    size="large"
                  >
                    <el-icon><MagicStick /></el-icon>
                    生成提纲
                  </el-button>
                </div>

                <div v-if="outlineResult" class="result-area">
                  <div class="result-header">
                    <h3>生成的技术提纲</h3>
                    <el-button
                      type="success"
                      @click="downloadFile(outlineResult, 'outline')"
                    >
                      <el-icon><Download /></el-icon>
                      下载文件
                    </el-button>
                  </div>
                  <el-input
                    v-model="outlineResult.content"
                    type="textarea"
                    :rows="15"
                  />
                  <el-alert
                    title="提示"
                    type="warning"
                    :closable="false"
                    style="margin-top: 10px"
                  >
                    可以在文本框中编辑提纲内容,然后在下一步生成完整文档时使用
                  </el-alert>
                </div>
              </el-card>
            </div>
          </el-tab-pane>

          <!-- 生成完整文档标签页 -->
          <el-tab-pane label="3. 生成完整文档" name="full">
            <div class="tab-content">
              <el-card shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-icon><DocumentCopy /></el-icon>
                    <span>生成完整技术文档</span>
                  </div>
                </template>
                <el-alert
                  title="说明"
                  type="info"
                  :closable="false"
                  style="margin-bottom: 20px"
                >
                  基于技术提纲生成详细的技术响应文档,包含具体人员信息、设备配置和标准格式的偏离表。
                </el-alert>

                <div class="upload-section">
                  <h4>技术要求文件 (必需)</h4>
                  <el-upload
                    ref="fullUpload"
                    :auto-upload="false"
                    :limit="1"
                    accept=".md"
                    :on-change="handleFullFileChange"
                    drag
                  >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                      拖拽技术要求文件到此处或<em>点击选择</em>
                    </div>
                  </el-upload>
                </div>

                <div class="upload-section" style="margin-top: 20px">
                  <h4>技术提纲文件 (可选,建议提供)</h4>
                  <el-upload
                    ref="fullOutlineUpload"
                    :auto-upload="false"
                    :limit="1"
                    accept=".md"
                    :on-change="handleFullOutlineFileChange"
                    drag
                  >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                      拖拽技术提纲文件到此处或<em>点击选择</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        可以使用第二步生成的提纲,或不提供让系统自动生成
                      </div>
                    </template>
                  </el-upload>
                </div>

                <div class="action-buttons">
                  <el-button
                    type="primary"
                    :loading="fullLoading"
                    :disabled="!fullFile"
                    @click="handleFull"
                    size="large"
                  >
                    <el-icon><MagicStick /></el-icon>
                    生成完整文档
                  </el-button>
                </div>

                <div v-if="fullResult" class="result-area">
                  <div class="result-header">
                    <h3>完整技术文档</h3>
                    <el-button
                      type="success"
                      @click="downloadFile(fullResult, 'full')"
                    >
                      <el-icon><Download /></el-icon>
                      下载文件
                    </el-button>
                  </div>
                  <el-input
                    v-model="fullResult.content"
                    type="textarea"
                    :rows="15"
                    readonly
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>

          <!-- 使用帮助标签页 -->
          <el-tab-pane label="使用帮助" name="help">
            <div class="tab-content">
              <el-card shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-icon><QuestionFilled /></el-icon>
                    <span>使用帮助</span>
                  </div>
                </template>

                <el-timeline>
                  <el-timeline-item timestamp="步骤 1" placement="top">
                    <el-card>
                      <h4>提取技术内容 (可选)</h4>
                      <p>上传原始招标说明文件,系统会自动提取技术相关内容,过滤掉商务、法律条款。</p>
                      <ul>
                        <li>保留项目概况、技术要求、服务内容</li>
                        <li>删除商务条款、法律条款、评标方法</li>
                        <li>保留原文章节编号,便于制作偏离表</li>
                      </ul>
                    </el-card>
                  </el-timeline-item>

                  <el-timeline-item timestamp="步骤 2" placement="top">
                    <el-card>
                      <h4>生成技术提纲</h4>
                      <p>上传技术要求文件,系统会智能生成技术响应提纲。</p>
                      <ul>
                        <li>智能分析技术要求</li>
                        <li>生成针对性提纲结构</li>
                        <li>可以在生成后编辑调整</li>
                      </ul>
                    </el-card>
                  </el-timeline-item>

                  <el-timeline-item timestamp="步骤 3" placement="top">
                    <el-card>
                      <h4>生成完整文档</h4>
                      <p>上传技术要求和提纲文件,生成完整的技术响应文档。</p>
                      <ul>
                        <li>基于提纲生成详细技术方案</li>
                        <li>包含具体人员信息和设备配置</li>
                        <li>自动生成标准格式的偏离表</li>
                        <li>使用专业术语和行业标准表达</li>
                      </ul>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>

                <el-divider />

                <el-alert
                  title="重要提示"
                  type="warning"
                  :closable="false"
                >
                  <ul>
                    <li>本工具使用AI技术生成内容,输出结果仅供参考</li>
                    <li>人员信息、设备参数等数据为示例,需要根据实际情况核实和调整</li>
                    <li>生成的偏离表和技术参数必须经过专业人员审核</li>
                    <li>所有技术方案需要结合企业实际能力进行调整</li>
                  </ul>
                </el-alert>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>

      <!-- 页脚 -->
      <el-footer class="app-footer">
        <p>BPG - 投标文档生成工具 | 让投标文档撰写更智能、更高效、更专业</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage, ElNotification } from 'element-plus'
import {
  Document,
  Filter,
  List,
  DocumentCopy,
  QuestionFilled,
  UploadFilled,
  MagicStick,
  Download
} from '@element-plus/icons-vue'

const activeTab = ref('extract')

// 提取功能相关
const extractUpload = ref(null)
const extractFile = ref(null)
const extractLoading = ref(false)
const extractResult = ref(null)

// 提纲功能相关
const outlineUpload = ref(null)
const outlineFile = ref(null)
const outlineLoading = ref(false)
const outlineResult = ref(null)

// 完整文档功能相关
const fullUpload = ref(null)
const fullOutlineUpload = ref(null)
const fullFile = ref(null)
const fullOutlineFile = ref(null)
const fullLoading = ref(false)
const fullResult = ref(null)

// 文件选择处理
const handleExtractFileChange = (file) => {
  extractFile.value = file
}

const handleOutlineFileChange = (file) => {
  outlineFile.value = file
}

const handleFullFileChange = (file) => {
  fullFile.value = file
}

const handleFullOutlineFileChange = (file) => {
  fullOutlineFile.value = file
}

// 提取技术内容
const handleExtract = async () => {
  if (!extractFile.value) {
    ElMessage.warning('请先选择文件')
    return
  }

  extractLoading.value = true
  const formData = new FormData()
  formData.append('file', extractFile.value.raw)

  try {
    const response = await axios.post('/api/extract', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })

    if (response.data.success) {
      extractResult.value = response.data
      ElNotification({
        title: '成功',
        message: '技术内容提取成功!',
        type: 'success'
      })
    } else {
      ElMessage.error(response.data.error || '提取失败')
    }
  } catch (error) {
    console.error('提取失败:', error)
    ElMessage.error(error.response?.data?.error || '提取失败,请检查文件格式')
  } finally {
    extractLoading.value = false
  }
}

// 生成技术提纲
const handleOutline = async () => {
  if (!outlineFile.value) {
    ElMessage.warning('请先选择文件')
    return
  }

  outlineLoading.value = true
  const formData = new FormData()
  formData.append('file', outlineFile.value.raw)

  try {
    const response = await axios.post('/api/outline', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })

    if (response.data.success) {
      outlineResult.value = response.data
      ElNotification({
        title: '成功',
        message: '技术提纲生成成功!',
        type: 'success'
      })
    } else {
      ElMessage.error(response.data.error || '生成失败')
    }
  } catch (error) {
    console.error('生成失败:', error)
    ElMessage.error(error.response?.data?.error || '生成失败,请检查文件格式')
  } finally {
    outlineLoading.value = false
  }
}

// 生成完整文档
const handleFull = async () => {
  if (!fullFile.value) {
    ElMessage.warning('请先选择技术要求文件')
    return
  }

  fullLoading.value = true
  const formData = new FormData()
  formData.append('file', fullFile.value.raw)
  if (fullOutlineFile.value) {
    formData.append('outline', fullOutlineFile.value.raw)
  }

  try {
    const response = await axios.post('/api/full', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    })

    if (response.data.success) {
      fullResult.value = response.data
      ElNotification({
        title: '成功',
        message: '完整技术文档生成成功!',
        type: 'success'
      })
    } else {
      ElMessage.error(response.data.error || '生成失败')
    }
  } catch (error) {
    console.error('生成失败:', error)
    ElMessage.error(error.response?.data?.error || '生成失败,请检查文件格式')
  } finally {
    fullLoading.value = false
  }
}

// 下载文件
const downloadFile = (result, type) => {
  const blob = new Blob([result.content], { type: 'text/markdown' })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = result.filename
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
  ElMessage.success('文件下载成功')
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.app-header {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  color: #409EFF;
  font-weight: 600;
}

.app-main {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.main-tabs {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tab-content {
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}

.upload-section h4 {
  margin-bottom: 15px;
  color: #606266;
  font-size: 16px;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

.result-area {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #DCDFE6;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.result-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

.app-footer {
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  color: #606266;
  line-height: 60px;
  box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
}

.app-footer p {
  margin: 0;
}

:deep(.el-upload-dragger) {
  padding: 40px;
}

:deep(.el-icon--upload) {
  font-size: 67px;
  color: #409EFF;
  margin-bottom: 16px;
}

:deep(.el-textarea__inner) {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

:deep(.el-timeline-item__content) {
  padding-bottom: 20px;
}

ul {
  margin: 10px 0;
  padding-left: 20px;
}

li {
  margin: 5px 0;
  color: #606266;
}
</style>
